<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>dashboard</title>
    <%--引入jquery和bootstrap方式--%>
    <link rel="stylesheet" href="/webjars/bootstrap/4.6.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/layout.css"/>
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<style>
    .main-t{
        margin: 5px;
    }
</style>
</head>
<body>
<div class="head-body-container">
    <div class="head">
        <jsp:include page="component/header.jsp"></jsp:include>
    </div>
    <div class="aside-main-container">
        <div class="aside">
            <jsp:include page="component/asider.jsp"></jsp:include>
        </div>

        <div class="main-t main">
            <form id="searchForm" class="form-inline"  action="/dashboard" method="post">
                <input class="form-control" name="filename" placeholder="请输入文件名"/>
                <input id="pageNum" type="hidden" name="pageNum" value="1">
                <input type="hidden" name="pageSize" value="5">
                <button class="btn btn-primary" onclick="queryByCondition(1)" type="submit">查询</button>
            </form>
            <table class="table table-bordered">
                <thead class="table-dark">
                <tr><td>用户ID</td><td>用户名</td><td>下载文件</td> <td>下载时间</td><td>下载状态</td><td>文件全路径</td></tr>
                </thead>
                <tbody>
                <c:forEach items="${results}" var="result">
                <tr>
                    <td>${result.downloadlLogId}</td>
                    <td>${result.downloadTime}</td>
                    <td>${result.username}</td>
                    <td>${result.filename}</td>
                    <td>${result.state}</td>
                    <td>${result.targetFile}</td>
                </tr>
                </c:forEach>
                </tbody>

            </table>
            <div class="btn-group-sm d-flex justify-content-center">
                <div>共${total}条</div>
                <c:forEach var="i" begin="1" end="${pages}" step="1">
                 <c:choose>
                     <c:when test="${i == param.pageNum}">
                         <button type="button"  onclick="queryByCondition('${i}')"  class="btn btn-warning">${i}</button>
                     </c:when>
                     <c:otherwise>
                         <button type="button" onclick="queryByCondition('${i}')" class="btn btn-secondary">${i}</button>

                     </c:otherwise>
                 </c:choose>

                </c:forEach>

            </div>

        </div>
    </div>
</div>
<script>
    function  queryByCondition(pageNum){
        alert(pageNum);
        document.getElementById("pageNum").value=pageNum;
        document.getElementById("searchForm").submit();
    }
</script>
</body>
</html>